<template>
  <div class="flex flex-col relative overflow-auto">
    <ArkTable ref="table" class="flex-1" v-if="mounted" v-model:options="options">
      <template v-for="(slot, slotName) of $slots" #[slotName]="slotProps">
        <slot :name="slotName" v-bind="slotProps"/>
      </template>
    </ArkTable>

    <ArkPagination
      v-model:options="options.pagination"
      class="shrink-0 absolute bottom-0 left-0 right-0"
      style="border-color: #95b8e7; border-style: solid; border-width: 1px"
    ></ArkPagination>
  </div>
</template>

<script setup lang="ts">
import {defineModel, onBeforeMount, onMounted, type PropType, ref, useTemplateRef, watch,} from "vue";
import _ from "lodash";
import ArkTable from "../../common/ark-table/ArkTable.vue";
import ArkPagination from "../../common/ark-pagination/ArkPagination.vue";
import ArkPaginationTableOptionsDefault, {
  ArkPaginationTableExpose,
  ArkPaginationTableOptions
} from "./ArkPaginationTableOptions";

/** 接口（组件的接口）。包括：defineOptions、defineModel、defineProps、defineEmits、defineExpose、defineSlots */
const options = defineModel("options", {
  type: Object as PropType<ArkPaginationTableOptions>,
  default: () => ArkPaginationTableOptionsDefault
});

defineExpose<ArkPaginationTableExpose>({
  fetchData() {
    return tableRef.value.fetchData();
  },
});

/** 本地状态 (本地的响应式 property)。包括：ref、computed */
const tableRef = useTemplateRef('table')

const mounted = ref(false);

/** 事件（通过响应式事件触发的回调）。包括：watch */
watch(
  () => {
    return [
      options.value.pagination?.pageSize,
      options.value.pagination?.pageNumber
    ]
  },
  () => {
    tableRef.value.fetchData()
  }
)

/** 生命周期钩子（按照它们被调用的顺序）。包括：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted */
onBeforeMount(() => {
  init();
});

onMounted(() => {
  mounted.value = true;
});

/** 非响应式的 property (不依赖响应系统的实例 property)。包括：常规函数 */
const init = () => {
  _.defaultsDeep(options.value, ArkPaginationTableOptionsDefault);
};

/** 其它 */
</script>

<style scoped></style>
